<template>
  <div class="masks" v-show="receiveSpreadInfo.ismask">
    <div class="info">
      <p>{{text}}</p>
      <div class="mobile">
        <input type="text" placeholder="电话" v-model="mobile" @blur="blurInput" @focus="focusClick">
      </div>
      <div class="vcode">
        <input
          type="text"
          placeholder="输入验证码"
          v-model="vcode"
          @blur="blurInput"
          @focus="focusClick"
        >
        <span v-show="!showVcode" @click="getVcode">{{getVcodes}}</span>
        <span v-show="showVcode">{{counts}}s</span>
      </div>
      <div class="dropDown">
        <Multiselect
              v-model="userAdress"
              :options="addrList"
              placeholder="请选择领奖地址"
              :searchable="false"
              @input="selectAddr"
              :allow-empty="false"
              :show-labels="false"
              track-by="name"
              label="name"
            >
          <template slot="singleLabel" slot-scope="{ option }">{{ option.name }}</template>
        </Multiselect>
      </div>
      <div class="btns">
        <span class="submit" @click="submit">提交</span>
        <span class="sclose" @click="close">关闭</span>
      </div>
    </div>
  </div>
</template>
<script>
import utils from "@/utils/utils";
import Cookies from "js-cookie";
import { MessageBox } from "mint-ui";
import * as config from "../config";
import request from "@/utils/request";
import Multiselect from "vue-multiselect";
export default {
  props: { 
    ouid: String,  //销售的openid
    ismask: Boolean,  //是否显示
    prizeText: String   //中奖文案
  },
  components:{
		Multiselect
	},
  data() {
    return {
      isFocus: false,
      mobile: "",
      vcode: "",
      showVcode: false,
      counts: "",
      timer: null,
      getVcodes: "获取验证码",
      text: this.prizeText, //获奖文案
      receiveSpreadInfo: {
        ouid: this.ouid, //销售的openid
        openid: Cookies.get("openid"),
        ismask: this.ismask //是否弹出提交手机框
      },
      
      //下拉列表
      userAdress: '',
			addrList: [
				{
				name: "中鼎理想城",
				detail:
					"滨江路与学院路（公园西街）交叉口东北角，中鼎理想城体验中心，电话：0319-2331111"
				},
				{
				name: "中鼎麒麟公馆",
				detail:
					"中鼎麒麟公馆：开元路与龙泉大街交叉口东行200米路北，电话：0319-5998111、0319-3551111"
				},
				{
				name: "中鼎麒麟郡+",
				detail:
					"中鼎麒麟郡+：钢铁北路麒麟郡小区北侧路北9#楼101铺，电话：0319-2337777"
				}
			]
    };
  },
  watch: {
    
  },
  methods: {
    focusClick(e) {
      this.isFocus = true;
      if (utils.browser.versions.ios) {
        setTimeout(function() {
          e.target.scrollIntoView(true);
        }, 100);
      }
    },
    blurInput(e) {
      this.isFocus = false;
      this.$nextTick(() => {
        if (utils.browser.versions.ios && !this.isFocus) {
          setTimeout(function() {
            e.target.scrollIntoView(false);
          }, 300);
        }
      });
    },
    // 选择地址下拉列表框
		selectAddr: function(data) {
			// this.userAdress = data.name;
			console.log(data);
		},
    //获取手机验证码/activity/logic/takeMobileVerifyCode
    getActPhoneVCode() {
      const _self = this;
      if (!_self.mobile) {
        return MessageBox.alert("请输入手机号", "提示");
      } else {
        request
          .get(
            `${
              _self.global.API_TJKEPPEL_ACT_URL
            }activity/logic/takeMobileVerifyCode`,
            {
              mobile: _self.mobile
            }
          )
          .then(function(data) {});
      }
    },
    //获取验证码
    getVcode() {
      const _self = this;
      const TIME_COUNT = 60;
      _self.getActPhoneVCode();
      if (!_self.timer && _self.mobile) {
        _self.counts = TIME_COUNT;
        _self.showVcode = true;
        _self.timer = setInterval(() => {
          if (_self.counts > 0 && _self.counts <= TIME_COUNT) {
            _self.counts--;
          } else {
            _self.showVcode = false;
            _self.getVcodes = "重新获取";
            clearInterval(_self.timer);
            _self.timer = null;
          }
        }, 1000);
      }
    },
    //提交手机号
    submit() {
      let _self = this;
      if (!_self.mobile) {
        return MessageBox.alert("请输入手机号", "提示");
      } else {
        if (!utils.isMobile(_self.mobile)) {
          return MessageBox.alert("请填写正确的手机号", "提示");
        }
      }
      if (!_self.vcode) {
        return MessageBox.alert("请输入验证码", "提示");
      }
      let query = {
        mobile: _self.mobile,
        verCode: _self.vcode,
        prizeCode: "prize_3"
      };
      let obj = JSON.stringify(query);
      request
        .post(
          `${
            _self.global.API_TJKEPPEL_ACT_URL
          }activity/logic/takeTelFareAndCheckVCode`,
          obj
        )
        .then(function(data) {
          MessageBox.alert("话费稍后会发送到你的手机！", "提示").then(
            function() {
              config.addUserInfoWithPhoneAndBindRegister(
                _self.receiveSpreadInfo.ouid,
                _self.openid,
                _self.mobile,
                name
              );
              _self.ismask = false;
              _self.pushUrl("main", _self.personal);
            }
          );
        });
    },
    close() {
      this.ismask = false;
      // console.log(this.receiveSpreadInfo.ismask)
    }
  }
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style lang = "stylus" scoped>
.masks {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.9;
  z-index: 6;
}

.info {
  background: #47ab08;
  width: 80%;
  padding: 0.5rem 0;
  margin-left: 10%;
  margin-top: 40%;
  border-radius: 0.1rem;
}

.info>p {
  width: 100%;
  text-align: center;
  font-size: 0.32rem;
  line-height: 0.5rem;
  color: #ffffff;
}

.vcode {
  margin: 0.2rem auto;
  height: 0.8rem;
  width: 70%;
  border: 1px solid #fff;
  border-radius: 0.2rem;
}

.vcode>input {
  width: 50%;
}

.vcode>span {
  display: inline-table;
  line-height: 0.8rem;
  width: 42%;
  font-size: 0.32rem;
  height: 0.8rem;
  color: #fff;
  text-align: center;
}

.info .mobile {
  margin: 0.2rem auto;
  height: 0.8rem;
  width: 70%;
  border: 1px solid #fff;
  border-radius: 0.2rem;
}

input {
  color: #fff;
  width: 92%;
  padding-left: 6%;
  height: 0.8rem;
  line-height: 0.8rem;
  background-color: transparent;
  border: none;
}
dropDown{
  width 70%
  height .8rem
  margin .2rem auto 
  border: 1px solid #fff;
  line-height: 0.8rem;
}

.btns {
  display: flex;
  justify-content: space-around;
}

.btns .submit {
  width: 30%;
  background-color: #da9d55;
  border-radius: 0.4rem;
  font-size: 0.32rem;
  height: 0.6rem;
  margin: 0.3rem auto;
  text-align: center;
  line-height: 0.6rem;
  color: #fff;
}

.btns .sclose {
  width: 30%;
  background-color: #da9d55;
  border-radius: 0.4rem;
  font-size: 0.32rem;
  height: 0.6rem;
  margin: 0.3rem auto;
  text-align: center;
  line-height: 0.6rem;
  color: #fff;
}
</style>


